<style scoped>
page{
    background: #F4F5FA;
}
.tab-item.active{
    background-color: #0088FF !important;
    color: #fff;
   
}
.tab-item{
    width: 120px;
    padding:8px 10px;
    text-align: center;
    color: #333;
    background-color: #f4f4f4;
}
.section{
    padding: 24rpx 20rpx;
    border-radius: 8px;
}


.choose-tag-time view {
	display: inline-block;
	box-sizing: border-box;
	/* border: 1px solid #dadada; */
	color: #222222;
	background-color: #f6f6f6;
	text-align: center;
	/* font-weight: 500; */
	font-size: 14px;
	border-radius: 3px;
	min-width: 90px;
	height: 32px;
	line-height: 32px;
}
.choose-tag-time .acitve {
	color: #ffffff !important;
	background-color: #0088ff !important;
}


.week-list {
	/* #ifdef APP-PLUS */
	width: 750rpx;
	/* #endif */
	flex-direction: row;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
}
/* #ifndef APP-NVUE */
.week-list ::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}
/* #endif */

.uni-tab-item {
	
	/* #ifndef APP-PLUS */
	display: inline-block;
	/* #endif */
	flex-wrap: nowrap;
	/* padding-left: 10px;
	padding-right: 10px; */
	padding: 10px 8px;
    background-color: #F6F6F6;
    /* margin-left: 5px; */
    border-radius: 5px;
    min-width: 42px;
}

.uni-tab-item.active {
    color: #fff;
	background-color: #0088FF;
}


.choose-consult-time .no-item-time {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.choose-consult-time {
	min-height: 6.3em;
	/* column-count: 5;
	box-sizing: border-box; */
}
.choose-consult-time .item-time {
	display: inline-block;
	box-sizing: border-box;
	border: 1px solid #dadada;
	margin-left: 6px;
	margin-bottom: 10px;
	color: #ababab;
	text-align: center;
	font-weight: 500;
	font-size: 28rpx;
	padding: 4px 9px;
	border-radius: 5px;
}
.choose-consult-time .acitve {
	color: #ffffff !important;
	background-color: #0088ff !important;
}
.module-card{
    background-color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 70%;
    z-index: 101;
    padding: 30px 25px;
    border-radius: 8px;

}
.module-card .item-list .title{
    min-width: 90px;
    text-align: justify;
    text-align-last: justify;
}
.item-list input{
    padding: 8px 0px;
}
.item-list textarea{
    height: 40px;
    background-color: #EEEEEE;
    border-radius: 8px;
    padding: 10px;
}
.area-list-picker{
    padding: 5px 6px;
}
/deep/.input-placeholder {
    font-size: 32rpx;
}
.yuyue-btn-tab .cancel{
    background-color: #BFBFBF;
    padding: 12px 16px;
    border-radius: 8px;
}
.yuyue-btn-tab .confirm{
    background-color: #0088FF;
    padding: 12px 16px;
    border-radius: 8px;
}
</style>
<template>
    <view class=" page">
       <tab :list="tabList" :tabIndex="tabIndex"></tab>
	   <swiper class="flex-1" @change="changeSwiper" :current="tabIndex">
	   		<swiper-item class="swiper-item" v-for="(item,index) in tabList" :key="index">
	   			<list-item :list="listCatchData[index]" :load="load[index]" @listloadmore="listloadmore" @refreshList="refreshList"></list-item>
	   		</swiper-item>
	   	</swiper>
    </view>
</template>

<script>
import tab from '@/components/tab/tabChild.vue'
import listItem from '@/components/list/list-item-child-home.vue'
import {socialHome} from '@/utils/http'
export default {
    data() {
        return {
            tabList:[{
				name:'list1'
			},{
				name:'list1'
			}],
			tabIndex:0,
			listCatchData:{
				0:[{
					name:1
				},{
					name:1
				}],
				1:[]
			},
			load:{},
			pageSize:16,
			loading:false,
        }
    },
    components:{
		tab,listItem
	},
     computed: {
        
    },
    watch:{
        
    },
	async onLoad(option) {
	    // this.getArea();
	    // await this.getConsultorTags();
	    // await this.weekList();
	    // this.getConsultorList();
	   // this.getList(this.tabIndex)
	},
    methods: {
        changeSwiper(e) {
        	const {
        		current
        	} = e.detail
        	this.tabIndex = current
        	console.log('changeSwiper——this.tabIndex',this.tabIndex)
        	if(!this.listCatchData[this.tabIndex] || this.listCatchData[this.tabIndex].length === 0){
        		this.getList(this.tabIndex)
        	}
        },
        tabClick({data,index}){
        	this.tabIndex = index
        	console.log('tabClick——this.tabIndex',this.tabIndex)
        },
        refreshList(current) {
        	this.listCatchData = {}
        	this.$set(this.listCatchData,current,[])
        	this.load = {}
        	this.getList(current)
        },
        listloadmore(val){
        	if(this.load[this.tabIndex].loading === 'noMore') return
        	this.load[this.tabIndex].page++
        	this.getList(this.tabIndex)
        },
        getList(current) {
        	if(!this.load[current]){
        		this.load[current] = {
        			page:1,
        			loading:'loading'
        		}
        	}
        	const params = {
        		audit_status:current,
        		page:this.load[current].page,
        		num:this.pageSize
        	}
        	if(current==0){
        		delete params.audit_status
        	}
        	console.log('params',params)
        	this.loading = true
        	socialHome(params).then(res => {
        		//如果没数据了
        		if(data&&(data.length === 0 || data.length < this.pageSize)){
        			
        		}
        		let oldList = this.listCatchData[current] || []
        		oldList.push(...data)
        		this.$set(this.listCatchData,current,oldList)
        	}).finally(()=>{
        		this.loading = false
        	})
        },
    },
}
</script>